<template>
  <section class="pay-success-main base-main">
    <!--支付成功提示-->
    <div class="pay-hint-box text-c pdlr15 bgcFFF">
      <p>
        <i class="color7E82F6 iconfont icondagou1"></i>
      </p>
      <p class="fs17">评价成功，感谢您的评价</p>
      <p class="fs15">
        <span class="color45454D" @click="handleToCommentList">查看我的评价</span>
        <span class="pr">
            <i class="color7E82F6 pa bgcFFF" @click="handleAccomplish">完成</i>
          </span>
      </p>
    </div>
    <!--支付成功提示-->

    <!--推荐-->
    <div class="recommend-box mt10 bgcFFF">
      <div class="title text-c fs16 color45454D line-bottom pdlr15">
        为你推荐
      </div>

      <div class="product-list">
        <pull-up-reload
          :on-infinite-load="onInfiniteLoad"
          :parent-pull-up-state="infiniteLoadData.pullUpState"
        >
          <ProductDiamonds
            :productData="productData"
            showOriginalPrice="originalPrice"
            @getProductId="getProductId"
          ></ProductDiamonds>
        </pull-up-reload>
      </div>
    </div>
    <!--推荐-->
  </section>
</template>

<script type="text/ecmascript-6">

  import ProductDiamonds from '../../components/ProductDiamonds.vue'
  import PullUpReload from '../../components/PullUpReload.vue'
  export default {
    components:{
      ProductDiamonds,PullUpReload
    },
    data() {
      return {
        productData:[
          {
            id:1,
            src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
            name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
            model:'SF-608 腰椎治疗仪',
            type:1,
            typeText:'产品上新',
            price:'268.00',
            originalPrice:'2654'
          },
          {
            id:2,
            src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
            name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
            model:'SF-608 腰椎治疗仪',
            type:2,
            typeText:'满500减100',
            price:'268.00',
            originalPrice:'2654.00'
          },
          {
            id:3,
            src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
            name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
            model:'SF-608 腰椎治疗仪',
            type:2,
            typeText:'满500减100',
            price:'268.00',
            originalPrice:'2654.00'
          },
          {
            id:4,
            src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
            name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
            model:'SF-608 腰椎治疗仪',
            price:'268.00',
            originalPrice:'2654.00'
          },
          {
            id:5,
            src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
            name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
            model:'SF-608 腰椎治疗仪',
            type:1,
            typeText:'产品上新',
            price:'268.00',
            originalPrice:'2654.00'
          },
          {
            id:6,
            src:'http://p7.qhimg.com/t0136089747e6d9017c.jpg',
            name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
            model:'SF-608 腰椎治疗仪',
            type:2,
            typeText:'满500减100',
            price:'268.00',
            originalPrice:'2654.00'
          },
        ],  //热卖产品

        // 上拉加载的设置
        infiniteLoadData: {
          initialShowNum: 3, // 初始显示多少条
          everyLoadingNum: 3, // 每次加载的个数
          pullUpState: 0, // 子组件的pullUpState状态
          pullUpList: [], // 上拉加载更多数据的数组
          showPullUpListLength: this.initialShowNum // 上拉加载后所展示的个数
        }
      }
    },
    methods: {
      // 上拉一次加载更多的数据
      getPullUpMoreData () {
        this.showPullUpListLength = this.infiniteLoadData.pullUpList.length
        if (this.infiniteLoadData.pullUpList.length + this.infiniteLoadData.everyLoadingNum > this.productData.length) {
          for (let i = 0; i < this.productData.length - this.showPullUpListLength; i++) {
            this.infiniteLoadData.pullUpList.push(this.productData[i + this.showPullUpListLength])
          }
        } else {
          for (let i = 0; i < this.infiniteLoadData.everyLoadingNum; i++) {
            this.infiniteLoadData.pullUpList.push(this.productData[i + this.showPullUpListLength])
          }
        }
        if (this.productData.length === this.infiniteLoadData.pullUpList.length) {
          this.infiniteLoadData.pullUpState = 3
        } else {
          this.infiniteLoadData.pullUpState = 0
        }
      },
      // 上拉加载
      onInfiniteLoad (done) {
        if (this.infiniteLoadData.pullUpState === 0) {
          this.getPullUpMoreData()
        }
        done()
      },
      //点击的产品id，跳转到产品详情页
      getProductId(obj){
        this.$router.replace({
          path:'/index/web/product',
          query: {
            id: obj.id,
          }
        })
      },
      //查看我的评价
      handleToCommentList(){
        console.log('查看我的评价');
        this.$router.push({
          name:'commentList'
        })
      },
      //完成
      handleAccomplish(){
        console.log('完成');
      }
    },
  }
</script>

<style scoped lang="scss">
  @import '../../assets/css/paymentSuccess';
</style>
